<template>
  <div class="container" :style="{height: height}">
    <div class="red-packet">
      <image resize="contain" :src="redPacketBg" class="red-packet-bg"></image>
      <div class="red-packet-values">
        <div class="red-packet-value" v-if="userRedPacket.money > 0">
          <text class="red-packet-value-val">{{userRedPacket.money.toFixed(0)}}</text>
          <text class="red-packet-value-text"> 元</text>
        </div>
        <div class="red-packet-value" v-if="userRedPacket.money == 0 && userRedPacket.integral > 0">
          <text class="red-packet-value-val">{{userRedPacket.money.toFixed(0)}}</text>
          <text class="red-packet-value-text"> 元</text>
        </div>
      </div>
      <div class="red-packet-name-wrapper">
        <text class="red-packet-name">{{userRedPacket.redPacketName}}</text>
      </div>
      <div class="red-packet-footer">
        <text class="red-packet-extra-integral" v-if="userRedPacket.money > 0 && userRedPacket.integral > 0">+{{userRedPacket.integral}}羽毛</text>
        <text class="red-packet-desc">恭喜您获得{{userRedPacket.redPacketDescription}}</text>
      </div>
      <text :class="['red-packet-draw-btn', 'activeable', userRedPacket.draw && 'red-packet-draw-btn-ok']" @click="draw(userRedPacket)">{{!userRedPacket.draw ? (loadingShow ? '领 取 中' : '现 在 领 取') : '领取成功，打开钱包查看'}}</text>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/activeable";
  .container {
    width: 750px;
    justify-content: center;
    align-items: center;
  }
  .red-packet {
    width: 547px;
    height: 657px;
    position: relative;
    &-bg {
      width: 547px;
      height: 657px;
      position: absolute;
      top: 0;
      right: 0;
    }
    &-footer {
      position: absolute;
      top: 407px;
      left: 109px;
      width: 329px;
      height: 108px;
    }
    &-extra-integral {
      font-size: 30px;
      line-height: 40px;
      color: $color;
      font-weight: 200;
      width: 329px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.67);
      height: 40px;
      border-radius: 40px;
      margin-bottom: 10px;
    }
    &-desc {
      text-align: center;
      font-size: 34px;
      line-height: 38px;
      color: #fde600;
    }
    &-values {
      position: absolute;
      top: 213px;
      left: 109px;
      width: 274px;
      height: 161px;
      align-items: center;
      justify-content: center;
    }
    &-name {
      font-size: 26px;
      line-height: 30px;
      color: $color;
      width: 46px;
      text-align: center;
      &-wrapper {
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 227px;
        left: 392px;
        width: 46px;
      }
    }
    &-draw-btn {
      position: absolute;
      top: 554px;
      text-align: center;
      left: 88px;
      font-size: 34px;
      background-color: #ffffff;
      border-radius: 46px;
      color: #811411;
      font-weight: 300;
      width: 373px;
      height: 64px;
      line-height: 64px;
      &-ok {
        font-size: 26px;
      }
    }
    &-value {
      flex-direction: row;
      align-items: flex-end;
      height: 130px;
      &-val {
        font-size: 130px;
        color: #fb4748;
        font-weight: 200;
        height: 130px;
        line-height: 130px;
      }
      &-text {
        font-size: 40px;
        height: 40px;
        line-height: 40px;
        color: $color;
        font-weight: 200;
        margin-bottom: 20px;
      }
    }

  }
</style>
<script>
let api = require('../include/api')
let urlPath = require('../include/url-path')
let navigator = require('../include/xnavigator')
module.exports = {
  props: {
    userRedPacket: {default: {}}
  },
  components: {
  },
  data () {
    return {
      redPacketBg: urlPath.assets('images/red-packet-bg.png?v=1'),
      userRedPacket: {},
      height: weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth
    }
  },

  created () {
  },
  methods: {
    draw (userRedPacket) {
      if (userRedPacket.draw) {
        navigator.push('my-balance.js')
        return
      }
      this.loadingShow = true
      api.userRedPacket.draw({id: userRedPacket.id}).done(rs => {
        userRedPacket.draw = true
      }).always(() => {
        this.loadingShow = false
      })
    }
  }
}
</script>
